
<template>
 <div style="margin-left: -50px;">
    <h1 style="text-align: center;">华莱士外卖点餐系统</h1>
    <el-card style="width:100%;margin-left: 20px">
        <template #header>
            <div  style="color: red;"class="card-header">
                <div class="food" v-for="a in tableData">
                <el-image style="width: 200px; height: 130px" :src="a.image" />
                   <p>
                    <li style="color: black;">编号：{{a.id}}</li>
                    <li style="margin-left: 60px;">$:{{a.price}}</li>
                   </p> 
                   <p>
                    <li style="height: 20px;color: black;font-size: 10px;margin-top: 10px;" >{{a.production_date}}</li>
                    <el-button style="margin-left: 40px;" type = "warning" plain @click="view(a.id)"><el-icon><Burger /></el-icon>.查看详情</el-button>
                    <el-dialog v-model="dialogVisible" title="kfc美食信息" width="800" height="800" align-center>
                        <el-card>
                            <el-from>
                                <el-form-item label = "商品编号">
                                    <el-input width ="100" v-model="food.id" placeholder="id" />
                                </el-form-item>
                                <el-form-item label = "商品图片">
                                    <el-input width ="100" v-model="food.image" placeholder="image" />
                                </el-form-item>
                                <el-form-item label = "商品价格:">
                                    <el-input width ="100" v-model="food.price" placeholder="price" />
                                </el-form-item>
                                <el-form-item label = "日期:">
                                    <el-input width ="100" v-model="food.production_date" placeholder="production_date" />
                                </el-form-item>
                            </el-from>
                            <div class = "dialog-footer">
                                <el-button  @click = "doAdd" style="margin-left: 600px;" type="success" plain><el-icon><Plus /></el-icon>添加购物车</el-button>
                            </div >     
                        </el-card>
                    </el-dialog>
                   </p>
                   
                </div>
            </div>
        </template>
        <el-pagination small background layout="prev, pager, next" :page-size = "10" :total="page.items" @current-change = "doChange" class="mt-4"/>
        <template #footer>
        </template>
    </el-card> 
</div>
 <RouterView />
</template>

<style scoped>
.card-header{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /*超过父元素自动换行*/
    
}
.food{
    margin-top: 50px;
    margin-left: 90px;
}
.food p{
    display: flex;
    flex-direction: row;
}
.food p li{
    list-style-type: none;
}
</style>


<script setup>
import { ref,onMounted} from "vue";
import {Plus,Burger,} from "@element-plus/icons-vue"
import { ElMessage } from 'element-plus'


// 显示全部数据
const tableData =ref([])
const query = ()=>{
    fetch("http://localhost:3000/kfcs?_page="+currentPage.value+"&_per_page=10",{
        method:'get'
    }).then(response=>response.json()).then((data)=>{
        tableData.value = data.data
        page.value= data


    })
}
onMounted(()=>{
    query()
})
//查看数据详情
const dialogVisible = ref(false)
const food = ref({
    id:"",
    image:"",
    production_date:"",
    price:null
})
//查看数据
const view=(id)=>{
    dialogVisible.value = true
    fetch("http://localhost:3000/kfcs/"+id,{
                    method:"get"
                }).then(response=>response.json()).then((data)=>{
                    food.value = data

                })
}
//添加数据
const doAdd=()=>{
    fetch("http://localhost:3000/shopcar",{
        method:'post',
        body:JSON.stringify(food.value)
    }).then(response=>response.json()).then((data)=>{
        ElMessage.success("添加成功")
        dialogVisible.value = false
    })
}
//分页操作
const page = ref({})
const currentPage = ref(1)
const doChange = (p)=>{
    currentPage.value = p
    query()
}
</script>

